@charset "UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html{
    font-size: 40px;
}
html,body{
    height: 100%;
    width: 100%;
}
.web{
    height: 100%;
    position: relative;
    width: 100%;
    padding-top: 1.875rem;
    >.top{
        display: flex;
        -webkit-display:flex;
        width: 100%;
        height: 1.875rem;
        padding-right:0.7rem ;
        padding-left:0.7rem ;
        justify-content: space-between;
        align-items: stretch;
        border-bottom: 1px solid #a7a7a7;
        position: absolute;
        top:0;
        >div{
            position: relative;
            display: flex;
            -webkit-display:flex;
            align-items: center;
            >a{
                >img:first-of-type{
                width: 0.65rem;
                }
            }
            >a{
                >img:nth-of-type(2){
            width: 0.775rem;
            }
            }
            >a{
                >img:nth-of-type(3){
            width: 0.7rem;
            }
            }
            >a{
                >img:nth-of-type(4){
            width: 0.9rem;
            }
            }
            >a{
                 >img:nth-of-type(5){
            width: 0.95rem;
            }
            }
        }
        >div::after{
            position: absolute;
            bottom: 0;
            display: block;
            content: "";
            height: 3px;
            width: 100%;
            background: #000000;
            transform-origin: center ;
            transform: scale(0);
            transition:all 1s;
        }
        >div:hover::after{
            transform: scale(3);
        }
    }
    >.mengban{
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 100;
        >label{
            >div{
            width: 100%;
            height: r(736);
            background: #7f7f7f;
            opacity: 0.5;
            }
        }
        >ul{
            width: 100%;
            height: r(400);
            background: white;
            >li{
                text-align: center;
                width: 100%;
                line-height: r(80);
                height: r(80);
                border-bottom: 1px solid #dcdcdc;
                color:#343434 ;
                font-size: r(26);
            }
            >li:nth-last-child{
                color: #a3a3a3;
            }
        }
    }
    >#box:checked+.mengban{
        display: block;
    }
    >.content{
        padding-bottom: r(201);
        padding-top: r(28);
        width: 100%;
        height: 100%;
        overflow: auto;
        >.title{
            padding-left: r(28);
            padding-right: r(28);
            >ul{
                height: r(38);
                width: 100%;
                display: flex;
                justify-content: space-between;
                >li:last-of-type{
                    display: flex;
                    align-items: center;
                    >img{
                        width: r(25);
                        height: r(24);
                    }
                }
                >li:nth-of-type(2){
                    height: r(38);
                    width: r(293);
                    line-height: r(38);
                    border-radius: r(6);
                    border: 1px solid #d0d0d0;
                    >span:first-of-type{
                        width: r(100);
                        height: 100%;
                        background: #a6a6a6;
                        color: white;
                        font-size: r(21);
                        text-align: center;
                        display: inline-block;
                    }
                    >span:nth-of-type(2){
                        color: #a3a3a3;
                        font-size: r(21);
                        display: inline-block;
                        width: r(95);
                        text-align: center;
                        border-right: 1px solid #d0d0d0 ;
                    }
                    >span:nth-of-type(3){
                        color: #a3a3a3;
                        font-size: r(21);
                        display: inline-block;
                        width: r(95);
                        text-align: center;
                    }
                }
            }
        }
        >.dongtaiOne{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                height: r(270);
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    >p{
                        font-size: r(21);
                        color: #585858;
                        line-height: r(40);
                    }
                    
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(6){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                >li{
                    margin-bottom: r(2);
                    height: r(212);
                    width: r(212);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >label{
                            img{
                            height: r(6);
                        }
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
        >.dongtaiTwo{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                height: r(146);
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                >li{
                    margin-bottom: r(2);
                    height: r(481);
                    width: r(318);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >img{
                            height: r(6);
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
        >.dongtaiThree{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                height: r(146);
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                >li:first-of-type{
                    margin: 0 auto;
                    height: r(304);
                    width: r(345);
                    margin-bottom: r(27);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    font-size: r(27);
                    color: #484848;
                    margin-bottom: r(27);
                    text-align: center;
                }
                >li:last-of-type{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: r(16);
                    >div:first-of-type{
                        width: r(51);
                        height: r(4);
                        background-color: black;
                    }
                    >div:nth-of-type(2){
                        width: r(5);
                        height: r(28);
                        background: black;
                    }
                    >div:nth-of-type(3){
                        width: r(246);
                        height: r(4);
                        background: #7f7f7f;
                    }
                    >div:last-of-type{
                        margin-left: r(9);
                        color: #a9a9a9;
                        font-size: r(21);
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >img{
                            height: r(6);
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
        >.dongtaiFour{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                height: r(146);
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                >li:first-of-type{
                    margin: 0 auto;
                    height: r(500);
                    width: r(380);
                    margin-bottom: r(17);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >img{
                            height: r(6);
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
        >.dongtaiFive{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    margin-bottom: r(18);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    margin-bottom: r(25);
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-bottom: r(28);   
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    font-size: r(19);
                    color: #8c8c8c;
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(6){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                >li:first-of-type{
                    margin: 0 auto;
                    height: 10.5rem;
                    width: 100%;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >img{
                            height: r(6);
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
          >.dongtaiSix{
            padding-top: r(30);
            border-bottom: 1px solid #cacaca;
            >ul:first-of-type{
                position: relative;
                height: r(146);
                margin-bottom: r(23);
                padding-left: r(32);
                padding-right: r(32);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >li:first-of-type{
                    height: r(60);
                    width: r(60);
                    margin: 0 auto;
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    >p{
                        width: 100%;
                        text-align: center;
                        color: black;
                        font-size: r(19);
                        >span{
                            color: red;
                            font-size: r(19);
                        }
                    }
                }
                >li:nth-of-type(3){
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    >div{
                        width: r(57);
                        height: r(30);
                        border: 1px solid #e5e5e5;
                        border-radius: r(10);
                        font-size: r(19);
                        color: #9d9d9d;
                        text-align: center;
                    }
                    >div:nth-of-type(1){
                        margin-right: r(11);
                    }
                    >div:nth-of-type(2){
                        margin-right: r(11);
                    }
                }
                >li:nth-of-type(4){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    left: r(45);
                    top:r(61);
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >li:nth-of-type(5){
                    height: r(25);
                    width: r(25);
                    position: absolute;
                    right: r(45);
                    top:r(61);
                    >a{
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            >ul:nth-of-type(2){
                >li:first-of-type{
                    margin: 0 auto;
                    height: r(360);
                    width: r(640);
                    margin-bottom: r(17);
                    >img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            >.dongtaiFoot{
                padding-left: r(30);
                padding-right: r(30);
                display:flex;
                justify-content: space-between;
                height: r(63);
                >ul:first-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(200);
                    >li{
                        font-size: r(17);
                        color: #cacaca;
                    }
                    >li:last-of-type{
                        display: flex;
                        align-items: center;
                        >img{
                            height: r(20); 
                            margin-right: r(6);  
                        }
                        >span{
                            font-size: r(17);
                        }
                    }
                }
                >ul:last-of-type{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    width: r(215);
                    >li:first-of-type{
                        >img{
                            height: r(6);
                        }
                    }
                    >li:nth-of-type(2){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                    >li:nth-of-type(3){
                        display: flex;
                        align-items: center;
                        >span{
                            font-size: r(17);
                            color: #cacaca;
                            margin-right: r(6);
                        }
                        >img{
                            height: r(24);
                        }
                    }
                }
            }
        }
    }
}
